<template>
  <div>
    <div class="main">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="200px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="靶场名称" prop="name">
          <el-input class="btn" v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="靶场简介" prop="desc">
          <el-input class="btn" v-model="ruleForm.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="靶场图片" prop="img">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="难度" prop="region">
          <el-select class="btn" v-model="ruleForm.region" placeholder="请选择">
            <el-option label="简单" value="eazy" />
            <el-option label="中等" value="mid" />
            <el-option label="困难" value="def" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属类型" prop="fileClass">
          <el-select class="btn" v-model="ruleForm.fileClass" placeholder="请选择">
            <el-option label="SQL注入类" value="1" />
            <el-option label="扫描类" value="2" />
            <el-option label="文件类" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="文件类型" prop="fileType">
          <el-select class="btn" v-model="ruleForm.fileType" placeholder="请选择">
            <el-option label="镜像文件" value="1" />
            <el-option label="war" value="2" />
            <el-option label="zip" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item class="method" label="实验过程(过程解析)" style="white-space: nowrap;" prop="exe">
          <el-input class="btn" v-model="ruleForm.wang" />
          <el-button @click="add" class="btn1">添加</el-button>
        </el-form-item>

        <el-form-item label="靶场文件地址" prop="address">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="flag" prop="flag">
          <el-input class="btn" v-model="ruleForm.flag" />
        </el-form-item>
        <el-form-item label="相关资料" prop="file">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
             <el-button @click="back()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
const router = useRouter();
const drawer = ref(false)
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '',
  region: '',
  desc: '',
  fileType:'',
  fileClass:'',
  exe:'',
  file:"",
  address:"",
  flag:'',
  wang:''
})

const rules = reactive<FormRules>({
  exe:[{required:true,message:'请输入实验过程'}],
  file:[{required:true,message:'请选择文件'}],
  address:[{required:true,message:'请选择地址'}],
  flag:[{required:true,message:'请输入flag'}],
  name: [
    { required: true, message: '请输入必填项', trigger: 'blur' },
    { min: 3, max: 20, message: '请输入3-20个字', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: '请选择一项',
      trigger: 'change',
    },
  ],
  
  fileType: [
    {
      required: true,
      message: '请选择一项',
      trigger: 'change',
    },
  ],
  fileClass: [
    {
      required: true,
      message: '请选择一项',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: '请输入必填项', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
//返回
const  back=()=>{
  router.go(-1)
}
const add =()=>{
  router.push('wang')
}
//文件上传
const fileList = ref<UploadUserFile[]>([
 
])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfert of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}
//图片上传
//上传图片
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
 if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>

<style lang="scss" scoped>
.nav1 {
  display: inline-block;
  margin: 20px 0 0 0;
}
.main {
  background-color: #fff;
  margin: 20px 0;
  padding: 20px;
}
.btn {
  width: 300px;
}
.method {
  margin: 0 20px;
  // width: 200px;
  margin: 0 0 20px 0;
}
.hide {
  display: none;
}
.btn1 {
  position: absolute;
  // top: 10px;
  left: 240px;
}
.avatar-uploader{
  width: 50px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.301);
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}
</style>